<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="component.js"></script>
    <script>
        let alert = new AlertClass();
        alert.onShow = function () {
            console.log ('先执行内部定义的onShow');
            console.log ('再执行全局定义的onShow')
        };
        alert.onHide = function () {
            console.log ('执行全局的onHide')
        };
        function showAlert () {
            alert.show({
                title: '提示标题',
                content: '提示内容',
                btnText: '我知道了',
                onShow: function(){
                    console.log('打开了alert')
                },
                onHide: function(){
                    console.log('关闭了alert')
                }
            })
        }
        /**
         * ConfirmClass
         */
        let confirm = new ConfirmClass();
        confirm.onShow = function () {
            console.log ('先执行内部定义的onShow');
            console.log ('再执行全局定义的onShow')
        };
        confirm.onHide = function () {
            console.log ('执行全局的onHide')
        };
        function showConfirm () {
            confirm.show({
                title: '提示标题',
                content: '提示内容',
                btns: [{
                    callback: function(instance){
                        instance.close = false;
                        console.log('点击了确定按钮，但不会关闭弹窗');
                    }
                }, {
                    text: '不需要',
                    callback: function(){
                        console.log('点击了不需要按钮');
                    }
                }],
                onShow: function(){
                    console.log('打开了confirm')
                }
            })
        }
        /*========================*/
        let toast = new ToastClass();
        toast.onShow = function () {
            console.log ('先执行内部定义的onShow');
            console.log ('再执行全局定义的onShow')
        };
        toast.onHide = function () {
            console.log ('执行全局的onHide')
        };
        function showToast () {
            toast.show({
                loading: true,
                onShow: function(){
                    console.log('打开了toast1');
                    setTimeout(function(){
                        toast.show({
                            text: '加载完成',
                            duration: 2000,
                            onHide: function(){
                                console.log('关闭了toast2')
                            }
                        })
                    }, 3000)
                }
            })
        }

    </script>
</head>
<body>
<button onclick="showAlert()">打开Alert</button>
<button onclick="showConfirm()">打开Confirm</button>
<button onclick="showToast()">打开Toast</button>
</body>
</html>